<template>
  <div>
    <el-page-header
      :content="$t('system.ram.app_detail')"
      @back="$router.back()"
    />
    <el-card class="mt-5">
      <el-row>
        <el-col :span="20">
          <p class="text-2xl font-bold my-2">
            {{ RamInfo.name }}
            <el-tooltip :content="$t('system.ram.edit_app')" placement="top">
              <i
                v-permission="{
                  permission: '12688090.MANAGE'
                }"
                class="el-icon-edit-outline cursor-pointer hover:text-blue-1"
                @click="handleEdit"
              />
            </el-tooltip>
          </p>
          <p class="text-secondary my-2">
            <span>{{ $t('system.ram.app_id') }}</span
            >: {{ RamInfo.username }}
            <el-tooltip :content="$t('system.ram.copy')" placement="top">
              <i
                class="el-icon-document-copy cursor-pointer hover:text-blue-1"
                @click="copyKey"
              />
            </el-tooltip>
          </p>
          <p class="text-secondary my-2">
            <span>{{ $t('system.ram.app_key') }}</span
            >: *********************************
            <el-tooltip :content="$t('system.ram.show_key')" placement="top">
              <i
                v-permission="{
                  permission: '12688090.MANAGE'
                }"
                class="el-icon-view cursor-pointer mr-2 hover:text-blue-1"
                @click="keyVisible = true"
              />
            </el-tooltip>
            <el-tooltip :content="$t('system.ram.reset_key')" placement="top">
              <i
                v-permission="{
                  permission: '12688090.MANAGE'
                }"
                class="el-icon-edit-outline cursor-pointer hover:text-blue-1"
                @click="keyEditVisible = true"
              />
            </el-tooltip>
          </p>
        </el-col>
      </el-row>
      <el-divider class="my-4" />
      <div class="my-5 flex justify-between">
        <div>
          <p class="text-xl font-bold">{{ $t('system.ram.capabilities') }}</p>
        </div>
        <div
          v-permission="{
            permission: '12688090.MANAGE'
          }"
        >
          <div class="relative">
            <el-button
              type="primary"
              class="w-8"
              @click="moduleVisible = true"
            >
            <svg-icon icon-class="Operation" class="cursor-pointer"/>
            </el-button>
          </div>
        </div>
      </div>

      <el-col class="mb-6">
        <el-table
          v-loading="listLoading"
          :show-overflow-tooltip="true"
          :data="tableData"
          stripe
        >
          <el-table-column
            prop="roleId"
            width="300px"
            :label="$t('system.ram.capability')"
          >
            <template v-slot="{row}">
              {{ $t(roleMap[row.roleName].name) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('system.ram.introduction')"
            prop="roleName"
          >
            <template v-slot="{row}">
              <div style="word-break: break-word">
                {{ $t(roleMap[row.roleName].intro) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-card>

    <module-edit
      :ram-info="RamInfo"
      v-model="moduleVisible"
      :title="$t('system.ram.bind_capability')"
      @submit="getRamInfo()"
    />

    <key-show
      :user-id="userId"
      v-model="keyVisible"
      :title="$t('system.ram.show_key')"
    />
    <key-edit-vue
      :user-id="userId"
      v-model="keyEditVisible"
      :title="$t('system.ram.reset_key')"
    />

    <ram-edit
      ref="editDialog"
      :user-id="editUserId"
      :name="editUserName"
      v-model="editUserVisible"
      :title="$t('system.ram.edit_app')"
      @submit="getRamInfo"
    />
  </div>
</template>

<script>
import { editUser, getUser } from '@/api/user'
import keyEditVue from './components/key-edit.vue'
import KeyShow from './components/key-show.vue'

import ModuleEdit from './components/module-edit.vue'

import RamEdit from './components/ram-edit.vue'

export default {
  components: {
    RamEdit,
    ModuleEdit,
    KeyShow,
    keyEditVue
  },
  data() {
    return {
      roleMap: {
        OPERATOR: {
          name: 'system.ram.cap.operator',
          intro: 'system.ram.cap.intro_operator'
        },
        REPORT: {
          name: 'system.ram.cap.report',
          intro: 'system.ram.cap.intro_report'
        },
        'PI MANAGEMENT': {
          name: 'system.ram.cap.pi_management',
          intro: 'system.ram.cap.intro_pi_management'
        },
        'FLYCARE NOTIFY CONFIG': {
          name: 'system.ram.cap.flycare_notify_config',
          intro: 'system.ram.cap.intro_flycare_notify_config'
        }
      },
      keyEditVisible: false,
      keyVisible: false,
      editUserVisible: false,
      editUserId: '',
      editUserName: '',
      moduleVisible: false,
      userId: null,
      RamInfo: {},
      tableData: [],
      listLoading: false
    }
  },
  mounted() {
    this.userId = this.$route.params.userId
    this.getRamInfo()
  },

  methods: {
    handleEdit() {
      this.editUserId = this.userId
      this.editUserName = this.RamInfo.name
      if (this.editUserName) {
        this.editUserVisible = true
      }
    },
    getRamInfo() {
      this.listLoading = true
      getUser(this.userId)
        .then((res) => {
          this.listLoading = false
          this.RamInfo = res
          console.log(res)
          this.tableData = res.roleList
        })
        .catch((err) => {
          this.listLoading = false
          this.$confirmError(err)
        })
    },
    copyKey() {
      var textarea = document.createElement('textarea')
      textarea.value = this.RamInfo.username
      // 添加input标签
      document.body.appendChild(textarea)
      // 选中input标签
      textarea.select()
      // 执行复制
      document.execCommand('copy')
      // 成功提示信息
      this.$message.success('Copy Success!')
      // 移除input标签
      document.body.removeChild(textarea)
    }
  }
}
</script>

<style scoped>
</style>
